<template>
  <div class="display">
    <div class="top">
      <div class="screen">
        <div class="title">火灾报警控制器</div>
        <div class="content">
          <div>设备正常运行</div>
        </div>
        <div class="time">{{ timing }}</div>
      </div>
      <div class="buttons"><RemoteControl /></div>
    </div>
    <div class="bottom"><p>JB-QBL-A220</p></div>
  </div>
</template>

<script>
import RemoteControl from "./RemoteControl.vue";
export default {
  props: {
    displayText: {
      type: String,
      default: "系统正常",
    },
  },
  data() {
    return {
      timing: "",
    };
  },
  components: {
    RemoteControl,
  },
  mounted() {
    this.onTiming();
  },
  methods: {
    onTiming() {
      let _this = this;
      _this.timer && clearTimeout(_this.timer); //清除定时器
      _this.timer = setTimeout(time, 1000); //開始运行
      function time() {
        _this.timer && clearTimeout(_this.timer); //清除定时器
        let dt = new Date();
        let y = dt.getFullYear();
        let mt = dt.getMonth() + 1;
        let day = dt.getDate();
        let h = dt.getHours(); //获取时
        let m = dt.getMinutes(); //获取分
        let s = dt.getSeconds(); //获取秒
        _this.timing =
          y +
          "/" +
          Appendzero(mt) +
          "/" +
          Appendzero(day) +
          " " +
          Appendzero(h) +
          ":" +
          Appendzero(m) +
          ":" +
          Appendzero(s) +
          "";
        function Appendzero(obj) {
          if (obj < 10) return "0" + "" + obj;
          else return obj;
        }
        _this.timer = setTimeout(time, 1000); //设定定时器，循环运行
      }
    },
  },
};
</script>

<style lang="less" scoped>
.display {
  width: 100%;
  height: 100%;
  color: white;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  .top {
    flex: 2;
    width: 100%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #2c261e;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .screen {
      position: relative;
      width: 100%;
      height: 45%;
      text-align: left;
      //   padding: 20px;
      box-sizing: border-box;
      background: #3a7bd5;
      border-radius: 8px;
      border: 1px solid #bdd5ea;
      box-shadow: inset 0 0 10px rgba(32, 155, 238, 0.1);
      .title {
        width: 100%;
        font-size: 18px;
        padding: 4px 8px;
        box-sizing: border-box;
        border-radius: 8px 8px 0 0;
        background: #1e5799;
      }
      .content {
        font-size: 16px;
        padding: 10px 15px;
        span {
          font-size: 15px;
        }
      }
      .time {
        width: 100%;
        position: absolute;
        bottom: 0px;
        right: 0px;
        font-size: 13px;
        text-align: right;
        letter-spacing: 1px;
        padding: 4px 8px;
        box-sizing: border-box;
        background: #1e5799;
        border-radius: 0 0 8px 8px;
      }
    }
    .buttons {
      width: 100%;
      height: 45%;
    }
  }
  .bottom {
    flex: 1;
    width: 100%;
    color: #fff;
    font-size: 1.2rem;
    line-height: 80px;
    margin-top: 20px;
    border-radius: 6px;
    background-color: #4d4946;
    border: 1px solid #484441;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  }
}
</style>